<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-form-item label="开发商账号(手机号)："  prop="mobile">
        <el-input type="number" :disabled="form.id" v-model="form.mobile"/>
      </el-form-item>
      <el-form-item label="密码：" prop="password" v-if="!form.id">
        <el-input type="text" v-model="form.password"   maxlength="12" show-word-limit/>
      </el-form-item>
      <el-form-item label="开发商名称：" prop="name">
        <el-input type="text" v-model="form.name"  maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="联系人姓名：" prop="contactName">
        <el-input type="text" v-model="form.contactName"  maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="联系人电话：" prop="contactMobile">
        <el-input type="number" v-model="form.contactMobile"/>
      </el-form-item>
      <el-form-item label="客户经理姓名：" prop="bankContactName">
        <el-input type="text" v-model="form.bankContactName"  maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="客户经理电话：" prop="bankContactMobile">
        <el-input type="number" v-model="form.bankContactMobile"/>
      </el-form-item>
      <div style="padding-left: 50px"><a style="color: #409EFF" v-if="form.id" @click="pwd=!pwd">{{pwd?'取消重置':'重置密码'}}</a></div>
      <el-form-item label="密码：" prop="password" v-if="pwd">
        <el-input type="text" v-model="form.password"   maxlength="12" show-word-limit/>
      </el-form-item>
      <el-form-item>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" :loading="loading"  @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { edit,detail } from '@/api/manager'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        loading:false,
        pwd:false,
        form: {
          mobile:'',
          password:'',
          name: '',
          contactName:'',
          contactMobile:'',
          bankContactName:'',
          bankContactMobile:'',
          role:'developer',
          token:getToken()
        },
        rules:{
          appId:[
            { required: true, message: '请输入AppId', trigger: 'blur' },
          ],
          mobile: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                  callback(new Error("请输入正确的手机号码"));
                } else {
                  callback();
                }
              }
            }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, max: 12, message: '请输入8到12位的密码 ', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          contactName: [
            { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          ],
          contactMobile: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                  callback(new Error("请输入正确的手机号码"));
                } else {
                  callback();
                }
              }
            }
          ],
          bankContactName: [
            { required: true, message: '请输入客户经理姓名', trigger: 'blur' },
          ],
          bankContactMobile: [
            { required: true, message: '请输入客户经理电话', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                  callback(new Error("请输入正确的手机号码"));
                } else {
                  callback();
                }
              }
            }
          ],
        }
      }
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading=true
            let data=JSON.parse(JSON.stringify(this.form))
            if(this.$route.query.id&&!this.pwd){
              delete data.password
            }
            edit(data).then(res=>{
              this.$message.success('添加(编辑)成功')
              this.onCancel()
            }).finally(()=>{
              this.loading=false
            })
          }
        });
      },
      onCancel() {
        this.$router.go(-1)
      }
    },
    created() {
      if(this.$route.query.id){
        detail({targetId:this.$route.query.id,token:getToken()}).then(res=>{
          this.form=res.data
          this.form.role=res.data.role.value
          this.form.managerId=res.data.id
          this.form.token=getToken()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    width: 500px;
  }
  .line{
    text-align: center;
  }
</style>

